<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	#list{
		width:100%;
		height:100%;
	}
	#listcontent{
		width:800px;
		margin:0px auto;
	}
	#page{
		width:800px;
		margin:0px auto;
		margin-top:20px;
		text-align: center;
	}
	.go{
		width:50px;
	}
	#top{
		margin-bottom: 10px;
	}
	/* table{
		margin:0px auto;
	} */
</style>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.2.js"></script>
</head>

<body>
	<div id="list">
		<div id="listcontent">
			<h2>动物管理界面</h2>
			<span>管理员:${userinfo.uname}</span>
			<form action="${pageContext.request.contextPath}/animal/animal_list" name="frm" method="post">
				<div id="top">
					动物名称:<input type="text" name="query.aname" value="${query.aname}"/>
					动物种类:<select name="query.cid" id="cid">
						<option value="0">==请选择==</option>
					</select>
					<input type="hidden" id="now" name="query.pageNow" value="${pb.pageNow}"/>
					分布范围:<select name="query.did" id="did">
						<option value="0">==请选择==</option>
					</select>
					<button type="button" onclick="sreach()">搜索</button>
				</div>
			</form>
			<table width="800px" border="1px" cellspacing="0px">
				<tr>
					<th><button>全选</button>/<button>反选</button></th>
					<th>动物编号</th>
					<th>动物名称</th>
					<th>图片</th>
					<th>日期</th>
					<th>动物种类</th>
					<th>分布范围</th>
					<th><a href="${pageContext.request.contextPath}/jsp/add.jsp">添加</a></th>
				</tr>
				<c:forEach var="list" items="${pb.lists}">
				<tr align="center">
					<td><input type="checkbox" name="flag" value="${list.aid}"/></td>
					<td>${list.aid}</td>
					<td>${list.aname }</td>
					<td><img style="width:100px;height:100px" src="/pic/${list.imgPath}"/></td>
					<td><fmt:formatDate value="${list.createDate}" pattern="yyyy-MM-dd"/></td>
					<td>${list.category.cname}</td>
					<td>${list.distribution.dname}</td>
					<td><a href="${pageContext.request.contextPath}/animal/animal_showAnimal?animal.aid=${list.aid}">修改</a>/<a href="javasript:void(0)">删除</a></td>
				</tr>
				</c:forEach>
			</table>
		</div>
		<!-- 分页 -->
		<div id="page">
			当前页${pb.pageNow}/总页数${pb.pageCount}/总条数${pb.rowCount}　
			<button type="button" onclick="page(1)">首页</button>
			<button type="button" onclick="page(${pb.lastPage})">上一页</button>
			<button type="button" onclick="page(${pb.nextPage})">下一页</button>
			<button type="button" onclick="page(${pb.pageCount})">尾页</button>
			<input class="go" type="text" id="gopage"/><button type="button" onclick="gopage(this.value)">Go</button>
		</div>
	</div>
	<script type="text/javascript">
		function sreach(){
			$("#now").val(1);
			document.frm.submit();
		}
		function page(i){
			$("#now").val(i);
			document.frm.submit();
			//location = '${pageContext.request.contextPath}/animal/animal_list?query.pageNow='+i;
		}
		function gopage(j){
			var j = document.getElementById("gopage").value;
			location = '${pageContext.request.contextPath}/animal/animal_list?query.pageNow='+j;
		}
		
	$(function(){
		$.post(
				"{pageContext.request.contextPath}/animal/animal_showCategory",
				//加载category json数组
				function(data){
					console.log(data);
					var sel = $("#cid");
					var cate = '${query.cid}';
					for(var j in data){
						if(data[j].cid == cate){
							sel.append("<option value='"+data[j].cid+"'selected >=="+data[j].cname+"==</option>");

						}else{
							sel.append("<option value='"+data[j].cid+"'>=="+data[j].cname+"==</option>");
						}
						
					} 
				},
				"json"
			);
			$.post(
					"{pageContext.request.contextPath}/animal/animal_showDistribution",
					//加载Distribution json数组
					function(data){
						console.log(data)
						var sel = $("#did");
						var dis = '${query.did}';
						for(var i in data){
							if(data[i] == dis){
								sel.append("<option value='"+data[i]+"' selected >=="+data[i].dname+"==</option>");

							}else{
								sel.append("<option value='"+data[i]+"'>=="+data[i].dname+"==</option>");

							}
						}
					},
					"json"
				); 
		
	})
	</script>
</body>
</html>